<template>
  <div :class="[menu_width == 'MAX' ? 'main_menu_MAX' : 'main_menu_MIN']">
    <div class="home" @click="handleChangeFather(-1)">
      <img
        :src="menuList[0].iconIs"
        class="menu_icon"
        v-if="-1 == currentIndex.father"
      />
      <img
        :src="menuList[0].icon"
        class="menu_icon"
        v-if="-1 != currentIndex.father"
      />
      <span :class="-1 == currentIndex.father ? 'menu_nameIs' : 'menu_name'">{{
        menuList[0].name
      }}</span>
    </div>
    <el-collapse
      v-model="activeNames"
      :accordion="true"
      @change="handleChangeFather"
    >
      <el-collapse-item
        :name="index"
        v-for="(item, index) in removeList()"
        :key="index"
      >
        <template #title>
          <img
            :src="item.iconIs"
            class="menu_icon"
            v-if="index == currentIndex.father"
          />
          <img
            :src="item.icon"
            class="menu_icon"
            v-if="index != currentIndex.father"
          />
          <span
            :class="index == currentIndex.father ? 'menu_nameIs' : 'menu_name'"
            >{{ item.name }}</span
          >
        </template>
        <div
          v-for="(item2, index2) in item.children"
          :key="index2"
          class="menu_item"
          @click="handleChangeChildren(index2, item2.toPath)"
        >
          <img
            :src="item2.iconIs"
            class="menu_icon2"
            v-if="currentIndex.children == index2"
          />
          <img
            :src="item2.icon"
            class="menu_icon2"
            v-if="currentIndex.children != index2"
          />

          <span
            :class="
              index2 == currentIndex.children ? 'menu_name2Is' : 'menu_name2'
            "
            >{{ item2.name }}</span
          >
        </div>
      </el-collapse-item>
      <!-- <el-collapse-item title="反馈 Feedback" name="2">
        <div>控制反馈：</div>
        <div>页面反馈</div>
      </el-collapse-item> -->
    </el-collapse>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import { useStore } from "vuex";
import * as menuData from "@/common/menu-data";
import { menuList } from "../../common/menu-data";
import { useRouter } from "vue-router";
import store from "@/store";
export default {
  setup() {
    const state = reactive({
      menu_width: "", //菜单尺寸
      activeNames: [],
      currentIndex: { father: -1, children: -1 },
    });
    const Store = useStore();
    const Router = useRouter();
    //展开手风琴的回调
    const handleChangeFather = (val: any) => {
      state.currentIndex.father = val;
      state.currentIndex.children = -1;
      if (val == -1) {
        Router.push(menuList[0].toPath);
      }
    };
    const handleChangeChildren = (val: any, toPath?: any) => {
      state.currentIndex.children = val;
      Router.push(toPath);
    };
    //去除首页
    const removeList = () => {
      let list: Array<menuData.menu_item> = [];
      menuList.forEach((element, index) => {
        if (index != 0) {
          list[index - 1] = element;
        }
      });
      return list;
    };
    onMounted: {
      state.menu_width = Store.state.common.menu_width;
    }
    watch(
      //检测菜单尺寸的变化
      () => Store.state.common.menu_width,
      (newValue, oldValue) => {
        state.menu_width = Store.state.common.menu_width;
      }
    );
    return {
      ...toRefs(state),
      handleChangeFather,
      handleChangeChildren,
      menuList,
      removeList,
    };
  },
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.main_menu {
  position: fixed;
  top: 50px;
  left: 0;
  background-color: @subject_dark_grey;
  height: 100%;
  color: #e8eaec;
  overflow-x: hidden;
  .menu_item {
    background-color: @subject_dark_grey;
    display: flex;
    align-items: center;
    height: 30px;
    .menu_icon2 {
      width: 20px;
      margin-right: 20px;
      margin-left: 30px;
    }
    .menu_name2 {
      font-size: 11px;
      color: #e8eaec;
    }
    .menu_name2Is {
      font-size: 11px;
      color: @subject_green;
    }
  }
  .menu_icon {
    width: 30px;
    margin-right: 20px;
    margin-left: 15px;
  }

  .menu_name {
    font-size: 13px;
    color: #e8eaec;
  }
  .menu_nameIs {
    font-size: 13px;
    color: @subject_green;
  }
}
.main_menu_MAX {
  width: @menu_width_MAX;
  .main_menu ();
}
.main_menu_MIN {
  width: @menu_width_MIN;
  .main_menu ();
}
/deep/.el-collapse {
  border: 0;
}
/deep/.el-collapse-item__header {
  background-color: @subject_dark_grey;
  color: #fff;
  border: 0;
}
/deep/.el-collapse-item__content {
  padding: 0;
}
/deep/.el-collapse-item__wrap {
  border: 0;
}
</style>